<template>
  <div class="permission-table">
    <el-table :data="permissionData" border style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="权限名称" width="150" />
      <el-table-column prop="code" label="权限代码" width="150" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button 
            size="small" 
            type="danger" 
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const permissionData = ref([
  {
    id: 1,
    name: '用户管理',
    code: 'user:manage',
    description: '用户管理权限',
    status: 1
  },
  {
    id: 2,
    name: '角色管理',
    code: 'role:manage',
    description: '角色管理权限',
    status: 1
  },
  {
    id: 3,
    name: '权限管理',
    code: 'permission:manage',
    description: '权限管理权限',
    status: 0
  }
])

// 编辑权限
const handleEdit = (row) => {
  console.log('编辑权限:', row)
  ElMessage.info('编辑功能开发中')
}

// 删除权限
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除权限 "${row.name}" 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ElMessage.success('删除成功')
    // 这里可以添加实际的删除逻辑
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

onMounted(() => {
  // 后续可以在这里添加获取数据的逻辑
  console.log('组件已挂载')
})
</script>

<style scoped>
.permission-table {
  padding: 20px;
}

.el-button {
  margin-right: 10px;
}

.el-tag {
  margin-right: 10px;
}
</style> 